import React, { useState, useEffect, useRef } from 'react';
import tabsData, { TabData } from './tabsData'; // 导入 Tab 数据和类型定义
import './Bottom.scss'; // 导入样式文件

const TabComponent: React.FC = () => {
  // 用于管理当前激活的 Tab ID
  const [activeTab, setActiveTab] = useState<string>(tabsData[0].id);
  // 用于管理是否展开显示所有 Tab
  const [isExpanded, setIsExpanded] = useState<boolean>(false);
  // 用于引用容器元素，以便计算其宽度
  const containerRef = useRef<HTMLDivElement>(null);
  // 用于存储每行可以显示的 Tab 数量
  const [tabsPerRow, setTabsPerRow] = useState<number>(4);

  useEffect(() => {
    // 计算每行可以显示的 Tab 数量
    const calculateTabsPerRow = () => {
      if (containerRef.current) {
        const containerWidth = containerRef.current.offsetWidth; // 获取容器的宽度
        const tabWidth = 130; // 假设每个 Tab 按钮的宽度为 120px
        setTabsPerRow(Math.floor(containerWidth / tabWidth)); // 计算并更新每行可显示的 Tab 数量
      }
    };

    calculateTabsPerRow(); // 初始化时调用计算函数
    window.addEventListener('resize', calculateTabsPerRow); // 监听窗口大小变化
    return () => window.removeEventListener('resize', calculateTabsPerRow); // 清理监听器
  }, []);

  // 处理 Tab 点击事件
  const handleTabClick = (tabId: string) => {
    setActiveTab(tabId); // 更新当前激活的 Tab ID
  };

  // 处理展开/收起按钮点击事件
  const handleExpandClick = () => {
    setIsExpanded(!isExpanded); // 切换展开/收起状态
  };

  // 根据是否展开来决定显示的 Tab 列表
  const visibleTabs = isExpanded ? tabsData : tabsData.slice(0, tabsPerRow);

  return (
    <div ref={containerRef} className="tab-container" style={{ padding: '20px', position: 'relative' }}>
      {/* 标签部分 */}
      <div className="tabs">
        {visibleTabs.map((tab: TabData) => (
          <button
            key={tab.id}
            onClick={() => handleTabClick(tab.id)}
            className={`tab-button ${activeTab === tab.id ? 'active' : ''}`}
          >
            {tab.label} {/* 显示标签名称 */}
          </button>
        ))}
        {/* 展开/收起按钮 */}
        <button
          onClick={handleExpandClick}
          className="expand-button"
        >
          {isExpanded ? '︽' : '︾'} {/* 根据展开状态显示不同的符号 */}
        </button>
      </div>
      {/* 标签内容部分 */}
      <div style={{ marginTop: '40px' }}>
        {tabsData.map((tab: TabData) => (
          <div
            key={tab.id}
            className={`tab-content ${activeTab === tab.id ? 'active' : ''}`}
          >
            {tab.content} {/* 显示对应的标签内容 */}
          </div>
        ))}
      </div>
    </div>
  );
};

export default TabComponent;
